<template>
  <div>
    <input v-model="ischecked" @input="changeVal" class="switch-component" type="checkbox" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      ischecked:false
    }
  },
  methods:{
    changeVal() {
      // console.log(this.ischecked)
      this.$emit("isActive",this.ischecked)
    }
  }
};
</script>

<style lang="scss" scoped>

.switch-component {
  position: relative;
  width: 242px;
  height: 36px;
  background-color: #eeeeee;
  border-radius: 36px;
  border: none;
  outline: none;
  -webkit-appearance: none;
  transition: all 0.2s ease-out;
}

// 按钮
.switch-component::after {
  content: "血糖数据";
  text-align: center;
  line-height: 36px;
  position: absolute;
  color: #fff;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #01a7f0;
  border-radius: 36px;
  transition: all 0.2s ease-out;
}

.switch-component::before {
  content: "血糖趋势";
  line-height: 36px;
  position: absolute;
  right: 15px;
  color: #999999;
}

// checked状态时，背景颜色改变
.switch-component:checked {
  background-color: #01a7f0;
}

// checked状态时，按钮位置改变
.switch-component:checked::after {
  content: "血糖趋势";
  left: 50%;
  color: #01a7f0;
  background-color: #eeeeee;
}

.switch-component:checked::before {
  content: "血糖数据";
  left: 15px;
  color: #fff;
}
</style>

